<template>
  <div>
    <div class="header">
      <i class="el-icon-search"></i>
      <input type="text" v-model="search" placeholder="搜索商品" @keyup.enter="searchA"/>
    </div>
    <div class="topImg">
      <img src="../../assets/h1.png" alt="" />
    </div>
    <div class="box">
      <div class="changenK">
        <p
          v-for="item in list"
          :key="item.name"
          @click="changeName(item)"
          :class="name == item.name ? 'active' : ''"
        >
          {{ item.name }}
        </p>
      </div>
    </div>
    <div class="shop">
      <div class="shoper" v-for="item in cateGorylist" :key="item.productId" @click="goTopic(item)">
        <div class="shoptop">
          <img :src="item.productsImg" alt="" />
        </div>
        <div class="shopbottom">
          <h6>{{ item.productName }}</h6>
          <p>{{ item.productContext }}</p>
          <span>{{item.describes}}</span><i></i><br>
          <b>￥{{ item.productPrice }}</b>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { cateGory } from "../../api";
export default {
  data() {
    return {
      search: "",
      category: "",
      name: "推 荐 ",
      list: [
        {
          name: "推 荐 ",
          category: "",
        },
        {
          name: "女 装",
          category: 1,
        },
        {
          name: "鞋 包",
          category: 2,
        },
        {
          name: "美 妆",
          category: 3,
        },
        {
          name: "水 果",
          category: 4,
        },
        {
          name: "生 鲜",
          category: 5,
        },
        {
          name: "海 鲜",
          category: 6,
        },
      ],
      cateGorylist: [],
      cateGorylist2: [],
    };
  },
  methods: {
    goTopic(item){
      console.log(item);
      this.$router.push('/topic'+item.productId)
    },
    categor() {
      cateGory({ category: this.category }).then((res) => {
        console.log(res);
        this.cateGorylist = res.data.data;
        this.cateGorylist2 = res.data.data;
        this.cateGorylist.map((item) => {
          item.productsImg = this.$store.state.imgsrc + item.productsImg;
        });
      });
    },

    changeName(item) {
      this.name = item.name;
      this.category = item.category;
      this.categor();
    },
    searchA(){
      if(this.search === ''){
        this.cateGorylist = [...this.cateGorylist2]
      }
      console.log('asdasdasd')
      console.log(this.search)
      this.cateGorylist = this.cateGorylist.filter(item=>item.productName.includes(this.search))
    }
  },
  mounted() {
    this.categor();
  },
};
</script>

<style scoped>
.shoper{
}
.shopbottom p {
  font-size: 14px;
}
.shopbottom b {
  display: inline-block;
  font-weight: normal;
  color: red;
  margin-top: 3vh;
}

.shopbottom span {
 font-size: 12px;
 padding: .3vh;
 border: .3px solid tomato;
 color: tomato;
 border-radius: 5px;
}
.shopbottom {

}
.shop {

  width: clac(100%-200px);
  margin: 0 auto;
  /* background: paleturquoise; */
  column-count: 5;
  column-gap: 20px;
  /* column-rule: 2px solid palevioletred; */
  column-fill: auto;
  column-width: 30vw;
  padding: 2vw 2vh;
  background: #f1eeee;
}
.shoper {
  width: 42vw;
  margin-bottom: 1vh;
  -moz-page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  /* border: 1px solid #e1e1ee; */
  background: white;
  margin-left: 1vw;
  padding: 1vh;
}
.shoptop {
  width: 100%;
  height: 85%;
}
h6 {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.shoptop img {
  width: 100%;
}
.shopbottom {
  height: 40%;
}
.active {
  background: #50846d;
  color: white !important;
}
.box {
  overflow: auto;
  /* overflow:scroll; */
  /* overflow-x: visible; */
  -webkit-overflow-style: none;
  margin-top: 3vh;
}
/* ::-webkit-scrollbar { */
/* height: 2px; */
/* background-color: rgba(0, 0, 0, 0); */
/* } */
.changenK {
  display: flex;
  /* width: 150%; */
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}
.changenK::-webkit-scrollbar {
  display: none;
}
.changenK p {
  border-radius: 10px;
  /* padding-left: 2.6vw;
  padding-right: 2.6vw; */
  padding: 1vh 5vw;
  color: rgb(77, 72, 72);
  font-size: 14px;
  /* border: 0.5px solid #000; */
  /* border-right: .5px solid #e1e1e1; */
}
.topImg {
  width: 100vw;
  text-align: center;
}
.topImg img {
  width: 95%;
}
.header {
  position: absolute;
  top: 0vh;
  text-align: center;
  /* position: relative; */
}
.el-icon-search {
  position: absolute;
  top: 2.5vh;
  left: 13vw;
  font-size: 20px;
}
.header input {
  width: 72vw;
  height: 6vh;
  background: #f6f3f3;
  border: 0;
  outline: none;
  margin-left: 10vw;
  margin-top: 1vh;
  border-radius: 20px;
  padding-left: 10vw;
}
</style>